<template>
    <p class="page_title">资产汇总</p>
    <div class="page_head">
        <div class="form">
            <el-form label-position='top' :model="form">
                <el-form-item label="存放单位">
                    <el-select v-model="form.company_id" placeholder="请选择">
                        <el-option
                            v-for="item in unit_list"
                            :key="item.company_id"
                            :label="item.company_name"
                            :value="item.company_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类搜索">
                    <el-cascader
                        placeholder="请选择"
                        v-model="category_id"
                        :options="class_list"
                        :props='props'
                        @change='onChange'
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="资产状态">
                    <el-select v-model="form.is_status" placeholder="请选择">
                        <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产编号">
                    <el-input v-model="form.asset_number"></el-input>
                </el-form-item>
            </el-form>
            <div class="btn_box">
                <el-button round @click="reset">重置</el-button>
                <el-button type="primary" round @click="search">搜索</el-button>
            </div>
        </div>
        <div class="head_data">
            <p>
                <span>资产总数</span>
                <span>{{total_count}}</span>
            </p>
            <p>
                <span>资产总额</span>
                <span>{{total_price}}</span>
            </p>
        </div>
    </div>
    <el-table :data="list">
        <el-table-column label="详情">
            <template #default="scope">
                <span class="details" @click="look_details(scope.row)">详情</span>
            </template>
        </el-table-column>
        <el-table-column label="资产编号" prop="asset_number"></el-table-column>
        <el-table-column label="单位名称" prop="company_name"></el-table-column>
        <el-table-column label="资产大类" prop="one_category"></el-table-column>
        <el-table-column label="资产小类" prop="tow_category"></el-table-column>
        <el-table-column label="资产名称" prop="asset_name"></el-table-column>
        <el-table-column label="资产状态">
            <template #default="scope">
                <div v-for="item in status" :key="item.value">
                    <span v-if="scope.row.is_status === item.value">{{item.label}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brand"></el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column label="数量" prop="num"></el-table-column>
        <el-table-column label="计量单位" prop="unit"></el-table-column>
        <el-table-column label="生产时间" prop="time_produce"></el-table-column>
        <el-table-column label="购置时间" prop="time_buy"></el-table-column>
        <el-table-column label="入账时间" prop="time_add"></el-table-column>
        <el-table-column label="折旧年限(月)">
            <template #default="scope">
                <span v-if="scope.row.is_depreciation">{{scope.row.depreciation_num}}</span>
                <span v-else>不算折旧</span>
            </template>
        </el-table-column>
        <el-table-column label="总价(元)" prop="total_price"></el-table-column>
    </el-table>
    <el-pagination
        @size-change="size_change"
        @current-change="current_change"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_count"
    >
    </el-pagination>
    <empty :is_empty='is_empty' @empty='is_empty = false'></empty>
    <vassets :is_assets='is_assets' :info='info' :class_list='class_list' @close='is_assets = false'></vassets>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { unit_statistics, get_class, get_asset } from './../../utils/api'
import { time } from './../../utils/time'
import empty from './../../components/empty.vue'
import vassets from './../../components/assets.vue'
export default defineComponent({
    setup() {
        let route = useRoute()
        let state = reactive({
            status: [{
                label: '全部',
                value: 0
            }, {
                label: '再用',
                value: 1
            }, {
                label: '闲置',
                value: 2
            }, {
                label: '故障',
                value: 3
            }, {
                label: '处理',
                value: 4
            }],
            form: {
                page: 1,
                pagesize: 10,
                is_status: undefined,
                category_id: undefined,
                asset_number: undefined
            },
            category_id: [],
            props: {
                children: 'down',
                value: 'category_id',
                label: 'category_name'
            },
            unit_list: [],
            class_list: [],
            total_count: 0,
            total_price: undefined,
            list: [],
            is_empty: false,
            is_assets: false,
            info: {}
        })

        if(route.query.company_id) {
            state.form.company_id = Number(route.query.company_id)
        }

        // 获取单位
        unit_statistics().then(({ data }) => {
            if(data.code === 1000) {
                state.unit_list = data.data
                state.unit_list.unshift({company_id: 0, company_name: '全部'})
            }
        })
        // 获取分类
        get_class().then(({ data }) => {
            if(data.code === 1000) {
                state.class_list = data.data
                state.class_list.unshift({category_id: 0, category_name: '全部', down:[{category_id: 0, category_name: '全部'}]})
                init()
            }
        })
        // 获取资产
        const init = () => {
            get_asset(state.form).then(({ data }) => {
                if(data.code === 1000) {
                    data.data.data.forEach(item => {
                        item.time_produce = time(item.produce_time)
                        item.time_buy = time(item.buy_time)
                        item.time_add = time(item.add_time)
                        state.class_list.forEach(classof => {
                            classof.down.forEach(down => {
                                if(item.category_id === down.category_id) {
                                    item.one_category = classof.category_name
                                    item.tow_category = down.category_name
                                }
                            })
                        })
                    })
                    state.list = data.data.data
                    state.total_count = data.data.total_count
                    state.total_price = data.data.total_price
                    if(!data.data.data.length) {
                        state.is_empty = true
                    }
                }
            })
        }
        // 选择分类
        const onChange = val => {
            state.form.category_id = val[1]
        }
        // 分页
        const size_change = size => {
            state.form.page = 1
            state.form.pagesize = size
            init()
        }
        const current_change = page => {
           state.form.page = page
           init()
           window.scrollTo(0, 0)
        }
        // 重置
        const reset = () => {
            state.form = {
                page: 1,
                pagesize: 10,
                is_status: undefined,
                category_id: undefined,
                asset_number: undefined
            }
            state.category_id = []
            init()
        }
        // 搜索
        const search = () => {
            state.form.page = 1
            init()
        }
        // 查看详情
        const look_details = item => {
            state.info = item
            state.is_assets = true
        }

        return {
            ...toRefs(state),
            onChange,
            reset,
            size_change,
            current_change,
            search,
            look_details
        }
    },
    components: {
        empty,
        vassets
    }
})
</script>

<style lang="scss" scoped>
.page_head{
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .form{
        width: 70%;
        margin-right: 1%;
        background-color: #fff;
        display: flex;
        .el-form{
            width: 80%;
            display: flex;
            padding: 20px;
            flex-wrap: wrap;
            .el-form-item{
                width: 50%;
                .el-input{
                    width: 222px;
                }
            }
        }
        .btn_box{
            display: inline;
            align-self: flex-end;
            margin-bottom: 20px;
            .el-button{
                display: block;
                &:last-child{
                    margin-left: 0;
                }
                &:first-child{
                    margin-right: 0;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .head_data{
        width: 29%;
        height: 264px;
        background-color: #fff;
        p{
            height: 102px;
            padding: 15px;
            border-bottom: 1px solid #999;
            font-weight: bold;
            &:last-child{
                border-bottom: 0;
            }
            span{
                &:last-child{
                    text-align: center;
                    display: block;
                    font-size: 18px;
                    margin-top: 15px;
                    margin-bottom: 22px;
                }
            }
        }
    }
}
.el-table{
    .details{
        cursor: pointer;
        color: #d98e9b;
    }
}
</style>